<template>
  <div class="box">
    <div class="body">
      <el-row>
        <el-col :span="12" class="el_col">
          <div class="grid-content bg-purple">
            <span>关键字</span>
            <el-input
              v-model="input"
              placeholder="根据编号搜索"
              class="input"
            ></el-input>
          </div>
          </el-col>
          <el-col :span="12" class="el_col1" >
          <el-button @click="removeInput">清空</el-button>
          <el-button class="btn2" @click="searchUser">搜索</el-button>
        </el-col>
      </el-row>

<headerVue :title="counts" />

      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="编号" width="180">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" >
            <template #default="{row}">
            <span>{{ row.questionType==='1'?'单选':row.questionType==='2'?'多选':'简答' }}</span>
          </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="200">
            <template #default="{row}">
              <div class="minbox">
 <a href="#" v-for="item in row.questionIDs" :key="item.number" @click.prevent="oneQuestion(item.id)" >{{item.number}}</a>
              </div>

          </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" > </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)" width="400">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" width="400"> </el-table-column>
          <el-table-column prop="userName" label="录入人" width="400"> </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <div>
                <i class="el-icon-delete" @click="delUser(row.id)"></i>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
     <pageToolVue :total="counts" :paginationPage="renderObj.page" :paginationPagesize="renderObj.pagesize" @pageChange="changeNowSize" @changSize="onPageSizeChange" />
      </div>
       </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
import headerVue from '@/module-manage/components/header'
import pageToolVue from '@/module-manage/components/page-tool'
export default {
  components: {
    headerVue, pageToolVue
  },
  data () {
    return {
      input: '',
      tableData: [],
      renderObj: {
        page: 1,
        pagesize: 10
      },
      counts: null
    }
  },
  created () {
    this.getUserList()
  },

  methods: {
    async getUserList () {
      const { data } = await randoms(this.renderObj)
      console.log(data)
      this.tableData = [...data.items]
      this.counts = data.counts
    },

    delUser (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms({ id })
          this.getUserList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async searchUser () {
      if (this.input) {
        this.renderObj.keyword = this.input
        const { data } = await randoms(this.renderObj)
        this.tableData = [...data.items]
      }
    },
    removeInput () {
      this.input = ''
      this.renderObj = {
        page: 1,
        pagesize: 10
      }
      this.getUserList()
    },
    changeNowSize (val) {
      this.renderObj.page = val
      this.getUserList(this.pageObj)
    },
    onPageSizeChange (val) {
      this.renderObj.pagesize = val
      this.getUserList(this.pageObj)
    }
  }
}
</script>

<style scoped lang="less">
.box {
  padding: 20px;
}
.body {
  padding: 20px;
  background-color: #fff;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  span{
    font-size: 14px;
    font-weight: 600;
  }
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #fff;
}
.input {
  width: 500px;
  margin-left: 10px;
}
.el_col1 {
  display: flex;
  justify-content: end;
  button {
    width: 56px;
    height: 30px;
    font-size: 12px;
    margin-left: 15px;
    padding: 0;
  }
  .btn2 {
    background-color: #409eff;
    color: #fff;
  }
}
/deep/.el-table {
  .cell {
    font-size: 14px;
  }
}
/deep/.has-gutter {
  background-color: #f4f4f5 !important;
}
.el_pagination {
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
}
/deep/.el-pagination__jump {
  margin-left: 5px;
}
.el-icon-edit {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background-color: #ecf5ff;
  color: #409eff;
  line-height: 37px;
}
.el-icon-delete {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background-color: #fef0f0;
  color: #f56c6c;
  text-align: center;
  line-height: 37px;
}
.minbox{
  display: flex;
  flex-direction: column;
  a{
  color: #409eff;
  }
}
</style>
